<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .div2{
            width: 47rem;
            height: 10rem;
            position: relative;
        }
        .p3{
            width: 10rem;
            height: 2rem;
            font-size: 1.8rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
            line-height: 2rem;
        }
        .p4{
            width: 13rem;
            height: 2rem;
            font-size: 1.8rem;
            position: absolute;
            top: 2rem;
            left: 10rem;
            line-height: 2rem;
        }
        .d5{
            width: 39rem;
            height: 4rem;
            font-size: 1.4rem;
            position: absolute;
            top: 5rem;
            left: 1rem;
            line-height: 2rem;
        }
        .s1{
            color: red;
        }
        .s2{
            color: rgb(99,99,99);
        }
        .d6{
            width: 1rem;
            height: 2rem;
            position: absolute;
            top: 4rem;
            right: 1rem;
        }
        .img3x{
            width: 1rem;
            height: 2rem;
        }
        .img3{
            width: 1rem;
            height: 2rem;
        }
        .d7{
            width: 47rem;
            height: 1rem;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .img4{
            width: 47rem;
            height: 0.5rem;
        }

        .d001{
            width: 47rem;
            height: 1rem;
            background-color: rgb(244,244,244); 
        }

        .div3{
            width: 47rem;
            height: 8rem;
            position: relative;
        }
        .d8{
            width: 6rem;
            height: 5rem;
            position: absolute;
            left: 1rem;
            top: 1rem;
        }
        .img5{
            width: 6rem;
        }
        .p5{
            width: 21rem;
            height: 4rem;
            position: absolute;
            top: 2rem;
            left: 8rem;
            color: rgb(114, 112, 112);
            font-size: 1.4rem;
            word-break: break-all; 
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
        }
        #g1{
            width: 10rem;
            height: 1rem;
            position: absolute;
            top: 2rem;
            right: 3rem;
            color: red;
            text-align: right;
        }
        #n1{
            width: 10rem;
            height: 1rem;
            position: absolute;
            top: 4rem;
            right: 3rem;
            text-align: right;
        }
        .d9{
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: 1rem;
            top: 3rem;
        }

        .div4{
            width: 47rem;
            height: 26rem;
        }
        .d10{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .p6{
            width: 7rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
            color: rgb(138, 136, 136);
            font-size: 1.4rem;
            line-height: 2rem;
        }
        .p7{
            width: 6rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            right: 3rem;
        }
        .d002{
            width: 1rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            right: 1rem;
        }
        .d11{
            width: 47rem;
            height: 10rem;
            position: relative;
        }
        .p8{
            width: 7rem;
            height: 2rem;
            position: absolute;
            top: 4rem;
            left: 1rem;
            font-size: 1.4rem;
            line-height: 2rem;
            color: rgb(138, 136, 136);
        }
        .p9{
            width: 18rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 1rem;
            right: 3rem;
        }
        .p99{
            width: 18rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 1rem;
            right: 3rem;
        }
        .p810{
            width: 18rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 4rem;
            right: 3rem;
        }
        .p10{
            width: 18rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 4rem;
            right: 3rem;
        }
        .p110{
            width: 18rem;
            height: 2rem;
            text-align: right;
            font-size: 1.4rem;
            line-height: 2rem;
            position: absolute;
            top: 7rem;
            right: 3rem;
        }
        .d003{
            width: 1rem;
            height: 2rem;
            position: absolute;
            top: 4rem;
            right: 1rem;
        }
        .d303{
            width: 1rem;
            height: 2rem;
            position: absolute;
            top: 4rem;
            right: 1rem;
        }

        .div5{
            width: 47rem;
            height: 11rem;
            position: relative;
        }
        .p11{
            width: 3rem;
            height: 2rem;
            font-size: 1.4rem;
            line-height: 2rem;
            color: rgb(112, 111, 111);
            position: absolute;
            left: 1rem;
            top: 2rem;
        }
        .i1{
            width: 44rem;
            height: 4rem;
            border: 0.2rem solid rgb(168, 170, 172);
            position: absolute;
            left: 1.6rem;
            top: 5rem;
        }

        .div6{
            width: 47rem;
            height: 8rem;
            position: relative;
        }
        .p12{
            width: 8rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
            font-size: 1.4rem;
            line-height: 2rem;
            color: rgb(138, 136, 136);
        }
        .p13{
            width: 4rem;
            height: 2rem;
            position: absolute;
            top: 5rem;
            left: 1rem;
            font-size: 1.4rem;
            line-height: 2rem;
            color: rgb(138, 136, 136);
        }
        #g2{
            width: 7rem;
            height: 1rem;
            font-size: 1.2rem;
            text-align: right;
            position: absolute;
            top: 2rem;
            right: 2rem;
        }
        #g3{
            width: 7rem;
            height: 1rem;
            font-size: 1.2rem;
            text-align: right;
            position: absolute;
            top: 5rem;
            right: 2rem;
        }

        .div7{
            width: 47rem;
            height: 6rem;
            position: relative;
            background-color: rgb(249,249,249);
        }
        .p14{
            width: 8rem;
            height: 2rem;
            font-size: 1.6rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 16rem;
        }
        #g4{
            width: 8rem;
            height: 2rem;
            font-size: 1.8rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 25rem;
            color: red;
        }
        .d12{
            width: 13rem;
            height: 6rem;
            position: absolute;
            right: 0;
            top: 0;
            color: white;
            background-color: red;
            line-height: 6rem;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">填写订单</div>
            </div>
        </div>

        <div class="div2">
            <div class="p3">李鹏飞的···</div>
            <div class="p4">159****8689</div>
            <div class="d5">
                <span class="s1">[默认]</span>
                <span class="s2">北京北京市朝阳区（五环里）潘家园河南
                    大厦天雅d古玩城4号楼3J</span>
            </div>
            <div class="d6">
                <img src="img/右箭头.png" alt="" class="img3x">
            </div>
            <div class="d7">
                <a href="0811_003.html">
                    <img src="img/7.png" alt="" class="img4">
                </a>
                
            </div>
        </div>

        <div class="d001"></div>

        <div class="div3">
            <div class="d8">
                <img src="img/goods_3.png" alt="" class="img5">
            </div>
            <div class="p5">长虹（CHANGHONG)的浪费空
                50U2S 50英寸4K 超水电费的...</div>
            <div id="g1">￥195.00</div>
            <div id="n1">x1</div>
            <div class="d9">
                <img src="img/右箭头.png" alt="" class="img3">
            </div>
        </div>

        <div class="d001"></div>

        <div class="div4">
            <div class="d10">
                <div class="p6">支付方式</div>
                <div class="p7">在线支付</div>
                <div class="d002">
                    <img src="img/右箭头.png" alt="" class="img3">
                </div>
            </div>

            <div class="d11">
                <div class="p8">配送方式</div>
                <div class="p9">工作日送货</div>
                <div class="p10">普通快递</div>
                <div class="d003">
                    <img src="img/右箭头.png" alt="" class="img3">
                </div>
            </div>

            <div class="d11">
                <div class="p8">发票信息</div>
                <div class="p99">普通发票</div>
                <div class="p810">个人</div>
                <div class="p110">明细</div>
                <div class="d303">
                    <img src="img/右箭头.png" alt="" class="img3">
                </div>
            </div>
        </div>

        <div class="d001"> </div>

        <div class="div5">
            <div class="p11">备注</div>
            <input type="text" class="i1" placeholder="输入备注信息">
        </div>

        <div class="d001"></div>

        <div class="div6">
            <div class="p12">商品总计</div>
            <div class="p13">运费</div>
            <div id="g2">￥195.00</div>
            <div id="g3">+￥5.00</div>
        </div>

        <div class="div7">
            <div class="p14">应付金额：</div>
            <div id="g4">￥200.00</div>
            <div class="d12">提交订单</div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".p3").html("陶星星");
		$(".p4").html("159***8689");
		$(".d5").html("北京北京市朝阳区（五环里）潘家园河南大厦天雅d古玩城4号楼3J");

        $(".d6").click(function(){
			window.location.href="地址.html";
		})

        var name = localStorage.name;
		var phone = localStorage.phone;
		var address = localStorage.address;
			
		$(".p3").html(name);
		$(".p4").html(phone);
		$(".d5").html(address);

        $(".d303").click(function(){
			window.location.href="发票.html";
		})

        var xinxi = localStorage.xinxi;
		var taitou = localStorage.taitou;
		var neirong = localStorage.neirong;
			
		$(".p99").html(xinxi);
		$(".p810").html(taitou);
		$(".p110").html(neirong);

        $(".d003").click(function(){
			window.location.href="配送.html";
		})

        var shijian = localStorage.shijian;
		var fangfa1 = localStorage.fangfa1;
		var fangfa2 = localStorage.fangfa2;
			
		$(".p9").html(shijian);
		$(".p10").html(fangfa1 + " + " + fangfa2);

        $(".d3").click(function(){
			window.location.href="我的.html";
		})
        
        $(".d9").click(function(){
			window.location.href="商品.html";
		})
    </script>
</body>
</html>